// <div class="charts container-fluid">
// <div class="bar col-sm-6" id="bar"></div>
// <div class="pie col-sm-6" id="pie"></div>

// </div>
//1.在需要的地方写好html结构
//2.调用以下js,让echarts生效
$(function(){
    //柱状图
    // 基于准备好的dom，初始化echarts实例
    var barChart= echarts.init(document.getElementById('bar'));

    // 指定图表的配置项和数据
    var baroption = {
        title: {
            text: '2017年注册人数'
        },
        tooltip: {},
        legend: {
            data:['人数']
        },
        xAxis: {
            data: ["一月","二月","三月","四月","五月","六月"]
        },
        yAxis: {},
        series: [{
            name: '人数',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    barChart.setOption(baroption);



    //实现饼状图
// 基于准备好的dom，初始化echarts实例
var pieChart= echarts.init(document.getElementById('pie'));

var pieoption = {
    title : {
        text: '热门品牌销售',
        subtext: '2018年4月',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['阿迪','耐克','李宁','乔丹','安踏']
    },
    series : [
        {
            name: '热门品牌销售',
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:[
                {value:335, name:'阿迪'},
                {value:310, name:'耐克'},
                {value:234, name:'李宁'},
                {value:135, name:'乔丹'},
                {value:1548, name:'安踏'}
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};
// 使用刚指定的配置项和数据显示图表。
pieChart.setOption(pieoption);

})
